window.onload = function () {
    let pr_img = document.querySelector('.pr_img');
    let pr_mask = document.querySelector('.pr_mask');
    let pr_big = document.querySelector('.pr_big');
    let pr_big_img = document.querySelector('.pr_big_img');
    let iteminfo_warp = document.querySelector('.iteminfo_warp');
    console.log(iteminfo_warp);
    pr_img.onmouseover = function () {
        pr_mask.style.display = 'block';
        pr_big.style.display = 'block';
        iteminfo_warp.style.visibility = 'hidden';

    }
    pr_img.onmouseout = function () {
        pr_mask.style.display = 'none';
        pr_big.style.display = 'none';
        iteminfo_warp.style.visibility = 'visible';

    }
    pr_img.addEventListener('mousemove', function (e) {
        let x = e.pageX - this.offsetLeft;
        let y = e.pageY - this.offsetTop;
        // console.log(x);
        // console.log(y);
        pr_mask_width = x - pr_mask.offsetWidth / 2;
        pr_mask_height = y - pr_mask.offsetHeight / 2;

        if (pr_mask_width <= 0) {
            pr_mask_width = 0;
        }
        if (pr_mask_width >= pr_img.offsetWidth - pr_mask.offsetWidth) {
            pr_mask_width = pr_img.offsetWidth - pr_mask.offsetWidth;
        }
        if (pr_mask_height <= 0) {
            pr_mask_height = 0;
        }
        if (pr_mask_height >= pr_img.offsetHeight - pr_mask.offsetHeight) {
            pr_mask_height = pr_img.offsetHeight - pr_mask.offsetHeight;
        }

        //判断
        pr_mask.style.left = pr_mask_width + 'px';
        pr_mask.style.top = pr_mask_height + 'px';
    })
    //大盒子移动
    pr_img.addEventListener('mousemove', function (e) {
        let x = pr_mask_width * (pr_big.offsetWidth - pr_big_img.offsetWidth) / (pr_img.offsetWidth - pr_mask.offsetWidth);
        let y = pr_mask_height * (pr_big.offsetHeight - pr_big_img.offsetHeight) / (pr_img.offsetHeight - pr_mask.offsetHeight);
        console.log(x, y);
        pr_big_img.style.left = x + 'px';
        pr_big_img.style.top = y + 'px';
    })
}  